<template>
    <div @click="click" :class="{'titletab-container-active':selected,'titletab-container':true}">
        <div :class="{'circle-active':selected,'circle':true}">
            
        </div>
        <img :style="{maskImage:'url('+iconsrc+')'}" :class="{'titletab-img':!selected,'titletab-img-active':selected,'titletab-img-base':true}" />
    </div>
</template>
<script>
    export default {
        name: "TitleTabItem",
        components: {},
        props: ["iconsrc","selected"],
        data() {
            return {
                _selected:false,
            };
        },
        methods: {
            click(){
                this.$emit("click");
            },
        },
        mounted() {

        },
        watch: {
        }
    };
</script>

<style scoped>

.titletab-container{
    width: 80px;
    height: 80px;
    position: relative;
    border-bottom: solid 3px transparent;
    border-top: solid 3px transparent;
}

.titletab-container-active{
    border-bottom: solid 3px rgb(212, 189, 142);
}

.circle{
    width: 50px;
    height: 50px;
    position: absolute;
    left:calc(50% - 25px);
    top:calc(50% - 25px);
    transition-duration: 200ms;
    border-radius: 25px;
    background-color: transparent;
    z-index: -34;
}

.circle-active{
    background-color: antiquewhite;
}

.titletab-img{
    background-color: rgb(255, 246, 236);
}

.titletab-img-base{
    width: 40px;
    height: 40px;
    position: absolute;
    transition-duration: 250ms;
    left:calc(50% - 20px);
    top:calc(50% - 20px);
    z-index: -33;
    mask-position: center;
    mask-size: 100%;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: 100%;
    -webkit-mask-repeat: no-repeat;
}
.titletab-img-active{
    background-color: rgb(73, 83, 102);
}

</style>